import React, { useEffect, useRef, useState } from "react";
import { Modal,Spin,Divider, message} from 'antd';

import LlxPlay from 'components/LlxPlay'

import  {getGraphDetailById} from 'api/index.js'

const PreviewAudio = (props) => {
  const {isModalVisible, setIsModalVisible,id} = props

  const img = useRef(null)
  const audio = useRef(null)


  const [play,setPlay] = useState(false)

  const [imgInfo,setImgInfo] = useState({width:0,height:0})

  const [imgUrl,setImgUrl] = useState('')

  
  const [gameInfo,setGameInfo] = useState({})

  const [showList,setShowList] = useState([])


  useEffect(()=>{
    setPlay(false)

    if(!isModalVisible||!id) return
    setTimeout(()=>{
      if(img.current){

        setShowList([])

        const getData= async()=>{
          const res = await getGraphDetailById(id.slice(0,id.indexOf('?')))
          const data1 = res.result

   

          data1.circles = res.result.gameCircleDTO?.map(i => {
            return {
              answers: i.answers.map(item => {
                return {
                  circleId: item.circleId,
                  coordinate: JSON.parse(item.coordinate)
                }
              }),
              pictureUrl: i.pictureUrl,
              id: i.id
            }
          })

          setGameInfo(data1)
               

          setImgUrl(data1.pictureUrl)



          const value = img.current.naturalWidth / 2 / 600

           data1.circles.map(i => {
            return i.answers
           }).forEach(i => {
            i.forEach(item => {
              setShowList(v=>[...v,{
                width: item.coordinate[2].x / value - item.coordinate[0].x / value,
                height: item.coordinate[1].y / value - item.coordinate[0].y / value,
                left: item.coordinate[0].x / value,
                top: item.coordinate[0].y / value
              }])
            })
           })


           setImgInfo({
            width:img.current.naturalWidth / 2, 
            height:img.current.naturalHeight / 2
          })

          }
      
          getData()
       }
    },1000)

  },[isModalVisible,id])// eslint-disable-line react-hooks/exhaustive-deps

  // 返回
  const onCancel = () => {
   if(audio.current){
    audio.current.pause()
   }
    setImgUrl('')
    setShowList([])
    setImgInfo({width:0,height:0})
    setIsModalVisible(false);
  };

  // 点击图
  const clickImg = (value) => {

    if(play){
      message.error('请勿频繁点击')
      return
    }

    setPlay(true)

    const data = gameInfo.circles.map(i => i.answers.length)

    let a = value

    const playOther = (i) => {
      if(!gameInfo.gameCircleDTO[i].interfereAudio) return setPlay(false) 
      audio.current = new Audio(gameInfo.gameCircleDTO[i].interfereAudio)
      audio.current.load()
      audio.current.oncanplay = async() => {
        audio.current.play()
       }
       audio.current.onended = () => {
        setPlay(false) 
      }
    }

    for (let i = 0; i < data.length; i++) {
      if(data[i]-a-1>=0){
        if(gameInfo.gameCircleDTO[i].audioUrl){
        if(gameInfo.gameCircleDTO[i].correctError===1){
          message.success('正确')
        }
        if(gameInfo.gameCircleDTO[i].correctError===2){
          message.success('讲解')
        }
        if(gameInfo.gameCircleDTO[i].correctError===0){
          message.error('错误'+gameInfo.gameCircleDTO[i].interfereText)
        }

        audio.current = new Audio(gameInfo.gameCircleDTO[i].audioUrl)
        audio.current.load()
        audio.current.oncanplay = async() => {
          audio.current.play()
         }
         audio.current.onended = () => {
           playOther(i)
         }
        } else {
          isModalVisible&&setPlay(false) 
        }
        return
      } else {
        a=a-data[i]
      }
    }

  }

  
  return  <Modal destroyOnClose footer={null} wrapClassName="modal-game" width={1200}  title={'圈图预览'}  visible={isModalVisible}  onCancel={onCancel}>

   <Spin tip="Loading..." spinning={imgInfo.width===0}>

   <div className="cool-picture">
        
        <img src={imgUrl} ref={img} alt="" style={{width:'600px',height:"auto"}}/>

        {
          showList.length? <>
          {
            showList.map((i,j)=>{
              return  <div onClick={()=>clickImg(j)} key={j} style={{backgroundColor:'rgb(58 48 48 / 50%)',color:'red',position:'absolute',width:i.width + 'px',height:i.height + 'px',left:i.left+'px',top:i.top+'px',borderRadius:'8px',fontSize:'40px'}}>
               {j+1}
              </div>
            })
          }
        </>:''
        }
    </div>

    {
      imgInfo.width===0?'':<div className="cool-data">
      <Divider>圈图信息</Divider>

      <div>
        题目引导 + 题目引导语音 ： {gameInfo.guideText}&nbsp;&nbsp;&nbsp;{
          gameInfo.guideAudio?<LlxPlay audioUrl={gameInfo.guideAudio}></LlxPlay>:''
        }
      </div>

      <div>
        题目解析 + 题目解析语音 ：  {gameInfo.analysisText}&nbsp;&nbsp;&nbsp;{
          gameInfo.analysisAudio?<LlxPlay audioUrl={gameInfo.analysisAudio}></LlxPlay>:''
        }
      </div>

      <div>
        背景音效 ： {
          gameInfo.backgroundMusic?<LlxPlay audioUrl={gameInfo.backgroundMusic}></LlxPlay>:''
        }
      </div>
    
  </div>
    }

   </Spin>

   </Modal>

}
export default PreviewAudio